#{extends 'include/base.html' /}
#{set title:'修改资料' /}
<div class="work_nav">
    <ul>
        <li><a href="@{Members.home()}">个人主页</a></li>
        <li class="work_nav_active"><a href="@{Members.editor()}">个人资料</a></li>
        <li><a href="@{Members.reciveEmail()}">收件箱</a></li>
        <li><a href="@{Members.sendEmail()}">发件箱</a></li>
        <li><a href="@{Members.changePass()}">修改密码</a></li>
    </ul>
</div>
<div class="simple_wrap">
    <ul class="path_nav">
        <li class="path_index"><a href="@{Application.index(0)}">首页</a></li>
        <li>><a href="@{Members.home()}">个人中心</a></li>
        <li>>个人资料</li>
    </ul>

    <ul class="work_main_nav">
        <li><a href="@{Concerns.myTrend(0)}">动态</a></li>
        <li><a href="@{Members.work(0)}">我的作品</a></li>
        <li><a href="@{Concerns.myConcern(0)}">关注</a></li>
        <li><a href="@{Collections.collectWork(0)}">收藏</a></li>
    </ul>
    <div class="clear"></div>
    <div class="my_info_wrap">
        <p>个人头像</p>
        <div class="my_info_img_wrap">
            <form  method = "post" action="@{Api.uploadUserPhoto()}" enctype="multipart/form-data" name="form" id="form">
            <input type="file" style="position: absolute;opacity:0;" name="image" id="multi-file" multiple/>
            <button style="display: block">选择文件</button>
            <img src="${user.getPhoto()}" alt="" id="touxiang"/>
            </form>
        </div>
    </div>
    <div class="my_info_wrap">
        <p>个人信息</p>
        <div class="my_info_info_wrap" style="padding-bottom: 40px;">
            <div class="input_wrap">
                <label>昵称:</label>
                <input type="text"  name="user.nickname" id="nickname" value="${user.nickname}"/>
                <input type="hidden"  name="user.account" id="account" value="${user.id}"/>
            </div>
            <div class="input_wrap">
                <label>个性化签名:</label>
                <input type="text"  name="user.sign" id="sign"  value="${user.sign}"/>
            </div>
            <div class="input_wrap">
                <label>座右铭:</label>
                <input type="text"  name="user.motto" id="motto"  value="${user.motto}"/>
            </div>
            <div class="input_wrap">
                <label>性别:</label>
                <input type="radio" checked  name="user.sex" value="0"/>男<input type="radio" name="user.sex" value="1"/>女
            </div>
            <div class="input_wrap">
                <label>邮箱:</label>
                <input type="email"  name="user.email" id="email"  value="${user.email}"/>
            </div>
            <div class="input_wrap">
                <label>微博:</label>
                <input type="text"  name="user.weibo" id="weibo"  value="${user.weibo}"/>
            </div>
            <div class="input_wrap">
                <label>所在地:</label>
                <input type="text"  name="user.address" id="address"  value="${user.address}" />
            </div>
            <div class="input_wrap">
                <label>从事领域</label>
                <select  name="user.workArea" id="workArea" >
                #{list items:list,as :'item'}
                    <option value="${item.typeName}">${item.typeName}</option>
                #{/list}
                </select>
            </div>

        </div>
    </div>
    <div class="my_info_wrap">
        <p>个人介绍</p>
        <div class="my_info_info_wrap">
            <div class="input_wrap">
                <label>网站:</label>
                <input type="text"  name="user.website" id="website"  value="${user.website}"/>
            </div>
            <div class="input_wrap">
                <label>个人说明:</label>
                <textarea  name="user.myExplain" id="myExplain" style="padding: 5px;">${user.myExplain}</textarea>
            </div>
        </div>
    </div>
    <p class="register_err hidden" style="text-align:center;position: relative;top: -30px;">错误</p>
    <div class="my_info_btn_wrap">
        <button class="my_info_btn_wrap_save" id="btn">保存</button>
        <button class="my_info_btn_wrap_abort">取消</button>
    </div>



</div>
<script type="text/javascript">
    (function () {
        var multi_file = document.getElementById('multi-file'),                 // 获取上传控件
                slice = Array.prototype.slice;                                      // 获取数组slice原型方法
                multi_file.addEventListener('change', function (e) {                    // 监听上传控件数据变化
                 var files = slice.call(multi_file.files, 0);                        // 将FileList对象转为数组获取forEach方法
            if(files[0].size>50000){
                alert("文件太大了,最大50KB");
                $("#multi-file").val("");
                files[0]=null;
            }
           else if (files[0].type.toLowerCase().match(/image.*/)) {
                reader = new FileReader();                                  // 实例化FileReader对象，用于读取文件数据
                reader.addEventListener('load', function (e) {              // 监听FileReader实例的load事件
                    $("#touxiang").attr('src', e.target.result)
                });
                reader.readAsDataURL(files[0]);
            }
            else{
                alert("只能选择图片");
                $("#multi-file").val("");
                files[0]=null;
            }
        });
    })();

    $('#btn').click(function () {
        var account = $('#account').val();
        var nickname = $('#nickname').val();
        var email = $('#email').val();
        var workArea = $('#workArea').val();
        var weibo = $('#weibo').val();
        var address = $('#address').val();
        var myExplain = $('#myExplain').val();
        var website = $('#website').val();
        var motto = $('#motto').val();
        var file = $('#multi-file').val();
        var sign = $('#sign').val();
        var sex = $("input[name='user.sex'][checked]").val();
        var  data ={
            user:{
            }
        };
        data.user.id=account;
        data.user.nickname=nickname;
        data.user.address=address;
        data.user.workArea=workArea;
        data.user.email=email;
        data.user.motto=motto;
        data.user.sign=sign;
        data.user.myExplain=myExplain;
        data.user.weibo=weibo;
        data.user.website=website;
        data.user.sex=sex;
            $.post('@{Api.modifyInfo()}', data, function(res) {
                console.log(res)
                if(res.result==1) {
                    if(file!=null&&file!=""){
                        $("#form").submit();
                    }
                    else{
                        location.href="@{Application.index()}"
                    }
                }
                else {
                    $('.register_err').text(res.data);
                    $('.register_err').removeClass('hidden');
                }
            });


    });

</script>